<template>
  <div class="home">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="nav in navs" :key="nav.id" :label="nav.name" :name="nav.name">{{ }}</el-tab-pane>
    </el-tabs>

    <el-alert style="margin:10px 0 20px 0;" title="点击文章列表可以进入详情页" type="info" close-text="知道了"></el-alert>

    <el-row>
      <el-col v-for="list in lists" :key="list.id" style="margin-bottom:30px;">
        <router-link :to="'/item/'+list.id" :title="list.name">
          <el-card :body-style="{ padding: '0px' }">
            <el-row>
              <el-col :span="6" :xs="24">
                <img
                  style="width:100%;height:150px;"
                  :src="'http://39.107.239.131/Tencent/public/index.php/index/index/getThumb?thumb='+list.thumb"
                  class="image"
                />
              </el-col>
              <el-col :span="18" :xs="24">
                <div style="padding: 14px;">
                  <h2>{{list.name}}</h2>
                  <div class="bottom clearfix">
                    <time class="time">{{ }}</time>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  data() {
    return {
      lists: [],
      activeName: "要闻"
    };
  },
  computed: {
    navs() {
      return this.$store.state.navs;
    }
  },
  created() {
    this.$store.dispatch("getNav");
  },
  mounted() {
    console.log(this.navs);
    //列表
    this.$axios
      .get("http://39.107.239.131/Tencent/public/index.php/index/index/article")
      .then(res => {
        console.log(res);
        this.lists = res.data.data;
      });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  components: {
    HelloWorld
  }
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  text-align: left;
}
</style>